Hello, 各位 iT 邦幫忙 的粉絲們大家好~~~

在本系列文會延續 Re: 從零改用 .NET MAUI 技術來繼續過去用 Xamarin 技術開發的一個 App : TopStore 使用 .NET MAUI 技術所建立的 TopStore App ，更新 .NET MAUI 在 .NET 6 轉換到 .NET 7 時所需要調整的部分，並持續地的開發 TopStore App 其他需要的功能。

本篇是 Re: 從零續用 .NET MAUI 技術開發過去的一個 App : TopStore 系列 系列文的 EP15。

為了呈現 OrderDetailShowPage 的內容，照前面 EP 所介紹的方式仍需要增加其 OrderDetailShowPage 的 ViewModel 及 Model，並針對其資料內容在 IDataService 設計取得方法並實作 DataService 與 MockData 的部分。

在 Models 資料夾下打開 OrderDetail.cs 並在類別 OrderDetailDisplay 後增加以下類別設計：

[INotifyPropertyChanged]
public partial class OrderDetailShow
{
    public int OrderDetailId { get; set; }
    public string ProductName { get; set; }
    public string ProductSn { get; set; }
    public decimal ProductPrice { get; set; }
    public decimal Quantity { get; set; }
    public decimal Price { get; set; }
    public string Note { get; set; }
}

完成結果如下圖：

接著在 ViewModels 當中增加一個 OrderDetailShowPageViewModel 的 C# 檔，並填入以下程式碼：

using CommunityToolkit.Mvvm.ComponentModel;

namespace TopStoreApp.ViewModels;

[QueryProperty(nameof(OrderDetailId), "orderDetailId")]
public partial class OrderDetailShowPageViewModel : BasePageViewModel
{
    [ObservableProperty]
    private Models.OrderDetailShow _orderDetailShow;

    public int OrderDetailId
    {
        set
        {
            //OrderDetailShow = App.DataService.GetOrderDetailShow(value);
        }
    }
}

其完成結果如下圖：

這邊會注意到，在此 OrderDetailShowPageViewModel 當中設計了一個 QueryProperty 的參數準備接收從 OrderDetailsPage 傳入的資訊值。

而在 OrderDetailId 的 Set 部分，由於還沒有在 DataService 當中設計 GetOrderDetailShow 的方法，所以先將此行程式註解。

接著找到前一回在 Pages 底下增加好的 OrderDetailShowPage.xaml 並變更一下其 ContentPage 當中的屬性：

xmlns:models="clr-namespace:TopStoreApp.Models"
xmlns:viewmodels="clr-namespace:TopStoreApp.ViewModels"
x:DataType="viewmodels:OrderDetailShowPageViewModel"
Title="Order Detail Show"

以及 VerticalStackLayout 標記的內容：

<Label
    FontAttributes="Bold"
    HorizontalOptions="FillAndExpand"
    HorizontalTextAlignment="Start"
    Text="商品序號"
    VerticalOptions="Center" />
<Label
    FontSize="Large"
    HorizontalOptions="FillAndExpand"
    HorizontalTextAlignment="Start"
    Text="{Binding OrderDetailShow.ProductSn}"
    VerticalOptions="Center"
    VerticalTextAlignment="Center" />
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*" />
        <ColumnDefinition Width="1*" />
    </Grid.ColumnDefinitions>
    <Label
        Grid.Column="0"
        FontAttributes="Bold"
        HorizontalOptions="FillAndExpand"
        HorizontalTextAlignment="Start"
        Text="商品名稱"
        VerticalOptions="Center" />
    <Label
        Grid.Column="1"
        HorizontalOptions="FillAndExpand"
        HorizontalTextAlignment="End"
        Text="{Binding OrderDetailShow.ProductPrice}"
        TextColor="LightGray"
        VerticalOptions="Center" />
</Grid>
<Label
    FontSize="Large"
    HorizontalOptions="FillAndExpand"
    HorizontalTextAlignment="Start"
    Text="{Binding OrderDetailShow.ProductName}"
    VerticalOptions="Center"
    VerticalTextAlignment="Center" />
<Label
    FontAttributes="Bold"
    HorizontalOptions="FillAndExpand"
    HorizontalTextAlignment="Start"
    Text="價格"
    VerticalOptions="Center" />
<Entry
    HorizontalOptions="FillAndExpand"
    HorizontalTextAlignment="Start"
    IsEnabled="False"
    Placeholder="請輸入價格..."
    Text="{Binding OrderDetailShow.Price}"
    VerticalOptions="Center"
    VerticalTextAlignment="Center" />
<Label
    FontAttributes="Bold"
    HorizontalOptions="FillAndExpand"
    HorizontalTextAlignment="Start"
    Text="數量"
    VerticalOptions="Center" />
<Entry
    HorizontalOptions="FillAndExpand"
    HorizontalTextAlignment="Start"
    IsEnabled="False"
    Placeholder="請輸入數量..."
    Text="{Binding OrderDetailShow.Quantity}"
    VerticalOptions="Center"
    VerticalTextAlignment="Center" />
<Label
    FontAttributes="Bold"
    HorizontalOptions="FillAndExpand"
    HorizontalTextAlignment="Start"
    Text="備註"
    VerticalOptions="Center" />
<Entry
    HorizontalOptions="FillAndExpand"
    HorizontalTextAlignment="Start"
    IsEnabled="False"
    Placeholder="請輸入備註..."
    Text="{Binding OrderDetailShow.Note}"
    VerticalOptions="Center"
    VerticalTextAlignment="Center" />

其完成結果如下圖：

大致上可以看到 OrderDetailShowPage 可以呈現成這樣的版面：

不過，由於還沒有實作 MockData 相關的資料填入，所以在畫面上看不到資料的呈現，這就留待下一回繼續囉~~~